<!-- 
  作者：彭心愉,
  描述：管理员权限/综合评分,
  修改人：彭心愉
 -->
<template>
<hr class="langHr">
<hr class="shortHr">
  <div class="taskBody">
    <div class="footer">
      <hr />
      <!-- 头部日期选项栏 -->
      <div class="block2">
        <el-date-picker
          v-model="value2"
          type="date"
          placeholder="查询日期"
          :default-value="new Date()"
        />
      </div>
      <div class="blockTask">
        <el-cascader :options="entryname" placeholder="项目名称" />
      </div>
     
      <div class="selctBtn">
        <el-button type="primary" color="#3E94AD">查询</el-button>
      </div>
      <div class="startBtn"><el-button>重置</el-button></div>
    </div>
    
    <!-- 选项卡1：考勤记录 -->
    <el-tabs
      v-model="activeName"
      type="card"
      class="demo-tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane label="个人评分" name="first">
        <el-table
          :data="tableData1"
          style="width: 100%; height: 300px"
          :header-cell-style="{ textAlign: 'center', background: '#c2dae2' }"
          :cell-style="{ textAlign: 'center' }"
          stripe="true"
          max-height="300"
          @row-click="handleRowClick"
          @selection-change="handleSelectionChange"
        >
          <!-- 表头 -->
          <el-table-column prop="college" label="院系"  />
          <el-table-column prop="projectName" label="项目名称"  />
          <el-table-column prop="teacher" label="责任老师"  />
          <el-table-column prop="team" label="小组"  />
          <el-table-column prop="name" label="学员姓名"  />
          <el-table-column prop="sex" label="性别"  />
          <el-table-column prop="code" label="学号" />
          <el-table-column prop="role" label="项目角色"  />
          <el-table-column prop="major" label="专业"  />
          <el-table-column prop="comprehensive" label="综合评分"  />
          <el-table-column prop="operation" label="作业评分" width="80">
            <!-- 流动列表删除功能（未实现） -->
            <template #default="scope">
              <el-button
                @click="editData(scope.row)"
                type="primary"
                icon="el-icon-edit"
                size="small"
                class="operate"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div>
          <el-pagination
            class="dataFen"
            :page-size="1"
            :hide-on-single-page="value"
            :total="3"
            layout="prev, pager, next"
          />
        </div>
      </el-tab-pane>
      <!-- 选项卡2：打卡记录 -->
      <el-tab-pane label="小组评分" name="second">
        <el-table
          :data="tableData2"
          style="width: 100%; height: 280px"
          :header-cell-style="{ textAlign: 'center', background: '#c2dae2' }"
          :cell-style="{ textAlign: 'center' }"
          stripe="true"
        >
          <!-- 表单 -->
          <el-table-column prop="college" label="院系" />
          <el-table-column prop="projectName" label="项目名称"  />
          <el-table-column prop="teacher" label="责任老师"  />
          <el-table-column prop="team" label="小组" />
          <el-table-column prop="teamLeader" label="小组长"  />
          <el-table-column prop="teamMember" label="项目成员" />
          <el-table-column prop="comprehensive" label="综合评分"  />
          <el-table-column prop="operation" label="作业评分">
            <!-- 流动列表删除功能（未实现） -->
            <template #default="scope">
              <el-button
                @click="editData(scope.row)"
                type="primary"
                icon="el-icon-edit"
                size="small"
                class="operate"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div>
          <el-pagination
            class="dataFen"
            :page-size="1"
            :hide-on-single-page="value"
            :total="3"
            layout="prev, pager, next"
          />
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
// import TableColumn from "@/Attendance/TableColumn";
export default {
  name: "AttendanceView",
  // components: {
  //   TableColumn,
  // },
  setup() {
    const value2 = ref("");
    //两个下拉选框
    const entryname = [
      {
        value: "consistency",
        label: "考勤系统",
      },
      {
        value: "feedback",
        label: "购票系统",
      },
    ];

    //斑马纹的组件
    const tableRowClassName = (number) => {
      if (number / 2 === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    };
    //选项卡组件
    const activeName = ref("first");
    const handleClick = (TabsPaneContext, Event) => {
      console.log(TabsPaneContext, Event);
    };
    //传入数据 每{}为一条传入对象
    const tableData1 = [
      {
        college: "软件学院",
        projectName: "实训系统",
        teacher: "张三",
        team:'02组',
        name:'李四',
        sex:'男',
        code: "199000407",
        role: "前端",
        major: "软件工程",
        comprehensive: "90",
      },
       {
        college: "软件学院",
        projectName: "实训系统",
        teacher: "张三",
        team:'02组',
        name:'李四',
        sex:'男',
        code: "199000407",
        role: "前端",
        major: "软件工程",
        comprehensive: "90",
      },
       {
        college: "软件学院",
        projectName: "实训系统",
        teacher: "张三",
        team:'02组',
        name:'李四',
        sex:'男',
        code: "199000407",
        role: "前端",
        major: "软件工程",
        comprehensive: "90",
      },
       {
        college: "软件学院",
        projectName: "实训系统",
        teacher: "张三",
        team:'02组',
        name:'李四',
        sex:'男',
        code: "199000407",
        role: "前端",
        major: "软件工程",
        comprehensive: "90",
      },
       {
        college: "软件学院",
        projectName: "实训系统",
        teacher: "张三",
        team:'02组',
        name:'李四',
        sex:'男',
        code: "199000407",
        role: "前端",
        major: "软件工程",
        comprehensive: "90",
      },
       {
        college: "软件学院",
        projectName: "实训系统",
        teacher: "张三",
        team:'02组',
        name:'李四',
        sex:'男',
        code: "199000407",
        role: "前端",
        major: "软件工程",
        comprehensive: "90",
      },
       {
        college: "软件学院",
        projectName: "实训系统",
        teacher: "张三",
        team:'02组',
        name:'李四',
        sex:'男',
        code: "199000407",
        role: "前端",
        major: "软件工程",
        comprehensive: "90",
      }
    ];
    const tableData2 = [ 
        {
          college: "软件学院",
          projectName: "实训系统",
          teacher: "张三",
          team:'02组',
          name:'李四',
          teamLeader:'张三',
          teamMember: "李四，李白...",
          comprehensive: "90",
        },
         {
          college: "软件学院",
          projectName: "实训系统",
          teacher: "张三",
          team:'02组',
          name:'李四',
          teamLeader:'张三',
          teamMember: "李四，李白...",
          comprehensive: "90",
        },
         {
          college: "软件学院",
          projectName: "实训系统",
          teacher: "张三",
          team:'02组',
          name:'李四',
          teamLeader:'张三',
          teamMember: "李四，李白...",
          comprehensive: "90",
        },
         {
          college: "软件学院",
          projectName: "实训系统",
          teacher: "张三",
          team:'02组',
          name:'李四',
          teamLeader:'张三',
          teamMember: "李四，李白...",
          comprehensive: "90",
        },
         {
          college: "软件学院",
          projectName: "实训系统",
          teacher: "张三",
          team:'02组',
          name:'李四',
          teamLeader:'张三',
          teamMember: "李四，李白...",
          comprehensive: "90",
        }, 
        {
          college: "软件学院",
          projectName: "实训系统",
          teacher: "张三",
          team:'02组',
          name:'李四',
          teamLeader:'张三',
          teamMember: "李四，李白...",
          comprehensive: "90",
        }, 
        {
          college: "软件学院",
          projectName: "实训系统",
          teacher: "张三",
          team:'02组',
          name:'李四',
          teamLeader:'张三',
          teamMember: "李四，李白...",
          comprehensive: "90",
        },
      ]

    const axios = require("axios");
    const removeData = (code) => {
      //提示框，判断用户是否操作失误
      this.$confirm("此操作将永久删除此学生, 是否继续?", "警告", {
        confirmButtonText: "继续",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const data = { code }; //这里<=>data = {id:id}
          axios
            .post("URL", data)
            // .then((_response) => {
            //   this.fetchdata(); //删除数据后重新获取数据
            // })
            .catch(() => {
              this.$message({
                type: "warning",
                message: "请求失败，请检查网络设置",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    };

    //返回数据
    return {
      value2,
      entryname,
      tableData1,
      tableData2,
      handleClick,
      activeName,
      tableRowClassName,
      // handleRowClick,
      // deleteRow,
      removeData,
      // response
    };
  },
};
</script>



<style scoped>
.langHr{
    margin:0 60px;
    border: 1px solid rgb(194, 218, 226);
    margin-top: 90px;
    background-color: rgb(194, 218, 226);
}
.shortHr{
    margin-left: 60px;
    width: 200px;
    border: 4px solid rgb(62, 148, 173);
    margin-top: -4px;
    border-radius: 20px;
    background-color: rgb(62, 148, 173);

}
/* 表单斑马纹 */
::v-deep .el-table .el-table__body tr.el-table__row td {
  background: rgba(223, 240, 245, 0.837);
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgb(194, 218, 226);
}
/* 整体组件样式 */
.taskBody {
  width: 1200px;
  margin-top: 20px;
  margin-left: 50px;
}

/* 引入的footer组件样式 */
.footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.blockTask {
  margin-left: 20px;
  width: 165px;
}

.attendance {
  margin-left: 20px;
  width: 125px;
}
.selctBtn {
  margin-left: 20px;
}
.startBtn {
  margin-left: 20px;
}
/* 引入的footer组件样式 end*/
/* 操作列内按钮样式 */
.operate {
  width: 40px;
  height: 25px;
  /* background: #077498; */
  color: rgb(219, 238, 254);
  font-size: 5px;
  align-items: center;
  text-align: center;
}
/* 分页组件所摆放的位置 */
.dataFen {
  margin-left: 500px;
  margin-top: 50px;
}
</style>
